<template>
	<view>
		<view class="top-box">
			<view class="top-title">比赛直播</view>
			<view class="top-cont">
				<view class="top-cont-one"><image src="../../..//live.png"></image></view>
				<view @tap="openPop" class="title">{{ title }}</view>
			</view>
		</view>
		<view @click="open" class="but">开播了</view>

		<uni-popup ref="dialogInput" type="dialog"><uni-popup-dialog mode="input" title="请输入标题" placeholder="请输入内容" @confirm="confirm"></uni-popup-dialog></uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';

export default {
	data() {
		return {
			title: '点击输入直播标题'
		};
	},
	components: {
		uniPopup,
		uniPopupMessage,
		uniPopupDialog
	},
	methods: {
		openPop() {
			this.$refs.dialogInput.open();
		},
		/**
		 * 点击取消按钮触发
		 * @param {Object} done
		 */
		close(done) {
			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
			// ...
			done();
		},
		/**
		 * 点击确认按钮触发
		 * @param {Object} done
		 * @param {Object} value
		 */
		confirm(done, value) {
			// 输入框的值
			console.log(value);
			// TODO 做一些其他的事情，手动执行 done 才会关闭对话框
			// ...
			this.title = value;
			done();
		},
		open() {
			if (this.title != '点击输入直播标题') {
				let that=this
				this.api.openLive({title: this.title})
					.then(res => {
						that.cacheHelper.setPushLive(res.pushStream)
						uni.navigateTo({
							url: `../tui/index?title=${res.title}&&roomCode=${res.roomCode}&&pushStream=${res.pushStream}`
						});
					})
					.catch(error => {});
			} else {
				this.tui.toast('请输入直播标题');
			}
		}
	}
};
</script>

<style>
.top-box {
	width: 650rpx;
	border-radius: 20rpx;
	background: rgba(48, 48, 48, 0.4);
	padding: 20rpx;
	margin-left: 30rpx;
	margin-top: 50rpx;
}
.but {
	position: fixed;
	bottom: 50rpx;
	width: 690rpx;
	border-radius: 40rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	text-align: center;
	font-size: 30rpx;
	color: white;
	margin-left: 30rpx;
	background: rgba(101, 182, 76, 1);
}
.top-title {
	color: white;
	font-size: 30rpx;
}
.top-cont {
	padding-top: 20rpx;
	display: flex;
	align-items: flex-start;
}
.top-cont-one {
	position: relative;
	width: 200rpx;
	height: 200rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
}
.top-cont-one > image {
	width: 200rpx;
	height: 200rpx;
	position: absolute;
	top: 0rpx;
}
.top-cont-one-but {
	width: 200rpx;
	position: relative;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	color: white;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	text-align: center;
	font-size: 24rpx;
}
.title {
	padding-left: 20rpx;
	color: white;
	font-size: 30rpx;
}
</style>
